<template>
	<view class="container">
		<uni-forms :modelValue="valiFormData" :label-width="100" ref="from" :rules="rules">
			<uni-forms-item label="标题" required name="title">
				<uni-easyinput v-model="valiFormData.title" placeholder="请输入标题" />
			</uni-forms-item>
			<uni-forms-item label="类别" required name="category">
				<uni-data-select v-model="valiFormData.category" :localdata="categoryData"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="所在园区" required name="park">
				<uni-data-select v-model="valiFormData.park" :localdata="parkData"></uni-data-select>
			</uni-forms-item>
			<uni-forms-item label="楼栋房间" required name="building_room">
				<uni-easyinput v-model="valiFormData.building_room" placeholder="请输入楼栋房间" />
			</uni-forms-item>
			<uni-forms-item label="所属企业" required name="company_name">
				<uni-easyinput v-model="valiFormData.company_name" placeholder="请输入所属企业" />
			</uni-forms-item>
			<uni-forms-item label="事件描述" required name="description">
				<uni-easyinput type="textarea" v-model="valiFormData.description" placeholder="请输入事件描述" />
			</uni-forms-item>
			<uni-forms-item label="联系姓名" required name="contact_name">
				<uni-easyinput v-model="valiFormData.contact_name" placeholder="请输入联系姓名" />
			</uni-forms-item>
			<uni-forms-item label="联系方式" required name="contact_phone">
				<uni-easyinput v-model="valiFormData.contact_phone" placeholder="请输入联系方式" />
			</uni-forms-item>
			<uni-forms-item name="wx_files" label="附件上传" required>
				<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:previewFullImage="true" :maxCount="6"></up-upload>
			</uni-forms-item>
		</uni-forms>
		<view class="button">
			<button @click="submitForm">提交</button>
		</view>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script>
	import {
		categoryList,
		parkList,
		orderUpdate
	} from '../../api/reportedMaintenance.js'
	export default {
		data() {
			return {
				valiFormData: {
					title: '',
					category: '',
					park: '',
					building_room: '',
					company_name: '',
					description: '',
					contact_name: '',
					contact_phone: '',
					wx_files: []
				},
				show: false,
				categoryData: [],
				parkData: [],
				fileList1: [],
				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请填写标题',
						}, ]
					},
					category: {
						rules: [{
							required: true,
							errorMessage: '请选择类别',
						}, ]
					},
					park: {
						rules: [{
							required: true,
							errorMessage: '请选择所在园区',
						}, ]
					},
					building_room: {
						rules: [{
							required: true,
							errorMessage: '请填写楼栋房间',
						}, ]
					},
					company_name: {
						rules: [{
							required: true,
							errorMessage: '请填写所属企业',
						}, ]
					},
					description: {
						rules: [{
							required: true,
							errorMessage: '请填写事件描述',
						}, ]
					},
					contact_name: {
						rules: [{
							required: true,
							errorMessage: '请填写联系姓名',
						}, ]
					},
					contact_phone: {
						rules: [{
							required: true,
							errorMessage: '请填写联系方式'
						}]
					}
				}
			};
		},
		created() {
			this.getList()
		},
		methods: {
			submitForm() {
				this.$refs.from.validate().then(res => {
					this.valiFormData.wx_files = this.fileList1.map(item => item.url)
					orderUpdate(this.valiFormData).then((res) => {
						if (res.code == 2000) {
							this.$refs.uToastRef.show({
								type: 'success',
								icon: false,
								message: res.msg
							})
							setTimeout(() => {
								uni.navigateBack({
									url: './list'
								})
								uni.$emit('queryList');
							}, 2000)
							
						} else {
							this.$refs.uToastRef.show({
								type: 'error',
								icon: false,
								message: res.msg
							})
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: JSON.parse(result).data.url
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: '/system/upload/file/', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							'Content-Type': 'multipart/form-data' // 根据需要设置请求头
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			getList() {
				categoryList().then((res) => {
					if (res.code == 2000) {
						res.data.forEach((item) => {
							let list = {
								value: item.id,
								text: item.name,
							}
							this.categoryData.push(list);
						})
					}
				})
				parkList().then((res) => {
					if (res.code == 2000) {
						res.data.forEach((item) => {
							let list = {
								value: item.id,
								text: item.name,
							}
							this.parkData.push(list);
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 25rpx;
		height: 100vh;
	}

	// .example {
	// 	padding: 15px;
	// 	background-color: #fff;
	// }

	// .segmented-control {
	// 	margin-bottom: 15px;
	// }

	// .button-group {
	// 	margin-top: 15px;
	// 	display: flex;
	// 	justify-content: space-around;
	// }

	// .form-item {
	// 	display: flex;
	// 	align-items: center;
	// }

	// .button {
	// 	display: flex;
	// 	align-items: center;
	// 	height: 35px;
	// 	margin-left: 10px;
	// }
	.button {
		display: flex;
		justify-content: center;
		padding-bottom: 40rpx;

		button {
			width: 40%;
			background-color: #ff6e3d;
			border: none;
			padding: 20rpx;
			border-radius: 50rpx;
			color: #fff;
		}

	}
</style>